<template>
  <div class="detail">
    <!-- 详情 -->
    <!--  $router.back()  返回上一个路径 -->
    <div class="banner">
      <!-- 顶部 -->
      <nav class="nav">
        <!-- <span class="back" @click="$router.back()">&lt;</span> -->
        <!-- <span class="back" ><van-icon name="arrow-left" /></span> -->
        <van-icon name="arrow-left" size="20" @click="$router.back()" />
        {{ list.community }}
        <van-icon name="share-o" size="18" />
      </nav>
      <!-- 轮播图 -->
      <van-swipe
        class="my-swipe"
        v-if="list.houseImg[0]"
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item v-for="(item, index) in list.houseImg" :key="index">
          <img :src="site + item" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 具体信息 -->
    <div class="info">
      <div class="one">
        <h4>{{ list.title }}</h4>
        <div>
          <span v-if="list.tags[0]" class="tie tag1">{{ list.tags[0] }}</span>
          <span v-if="list.tags[1]" class="tie tag2">{{ list.tags[1] }}</span>
          <span v-if="list.tags[2]" class="tie tag3">{{ list.tags[2] }}</span>
          <span v-if="list.tags[3]" class="tie tag3">{{ list.tags[3] }}</span>
          <span v-if="list.tags[4]" class="tie tag3">{{ list.tags[4] }}</span>
        </div>
      </div>
      <div class="two">
        <div class="am">
          <div>{{ list.price }}<span>/月</span></div>
          <div>租金</div>
        </div>
        <div class="am">
          <div>{{ list.roomType }}</div>
          <div>房型</div>
        </div>
        <div class="am">
          <div>{{ list.size }}平米</div>
          <div>面积</div>
        </div>
      </div>
      <div class="three">
        <div class="am-1">
          <div>
            <span class="title_1">装修：</span>
            精装
          </div>
          <div>
            <span class="title_1">楼层：</span>
            {{ list.floor }}
          </div>
        </div>
        <div class="am-1">
          <div>
            <span class="title_1">朝向：</span>
            {{ list.oriented[0] }}
          </div>
          <div>
            <span class="title_1">类型：</span>
            普通住宅
          </div>
        </div>
      </div>
    </div>
    <!-- 地址 -->
    <div class="map">
      <div class="map-title">
        小区: <span>{{ list.community }}</span>
      </div>
      <div class="mapContent">
        <!-- 百度地图 -->
        <baidu-map
          :center="center"
          :zoom="zoom"
          style="width: 100%; height: 145px"
        >
          <!-- 缩放 -->
          <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
          <!-- 点 -->
          <bm-marker
            :position="center"
            :dragging="true"
            animation="BMAP_ANIMATION_BOUNCE"
          >
            <bm-label
              :content="list.community"
              :labelStyle="{ color: 'red', fontSize: '14px' }"
              :offset="{ width: -35, height: 30 }"
            />
          </bm-marker>
        </baidu-map>
      </div>
      <div class="HouseDetail_about">
        <div class="houseTitle">房屋配套</div>
        <div class="titleEmpty">暂无数据</div>
      </div>
    </div>
    <!-- 房屋概况 -->
    <div class="HouseDetail_set">
      <div class="houseTitle">房源概况</div>
      <!-- 联系人 -->
      <div class="HouseDetail_contact">
        <div class="user">
          <img src="http://124.223.73.204:8080/img/avatar.png" alt="头像" />
          <div class="userInfo">
            <div>王女士</div>
            <div class="userAuth">
              <van-icon name="shield-o"></van-icon>
              已认证房主
            </div>
          </div>
        </div>
        <span class="userMsg">发消息</span>
      </div>
      <!-- 房源亮点 -->
      <div class="descText" v-html="list.description"></div>
    </div>
    <!-- 猜你喜欢 -->
    <div class="recommend">
      <div class="houseTitle">猜你喜欢</div>
      <div class="item">
        <div class="left">
          <img src="http://124.223.73.204:8080/img/message/1.png" alt="" />
        </div>
        <div class="right">
          <h3 class="title container">安贞西里 3室1厅</h3>
          <div class="one">
            <span class="xing">72.32㎡/南 北/低楼层</span>
          </div>
          <div class="two container">
            <span class="tie tag1">随时看房</span>
          </div>
          <div class="three"><span>4500</span>元/月</div>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <img src="http://124.223.73.204:8080/img/message/2.png" alt="" />
        </div>
        <div class="right">
          <h3 class="title container">天居园 2室1厅</h3>
          <div class="one">
            <span class="xing">83㎡/南/高楼层</span>
          </div>
          <div class="two container">
            <span class="tie tag1">近地铁</span>
          </div>
          <div class="three"><span>7200</span>元/月</div>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <img src="http://124.223.73.204:8080/img/message/3.png" alt="" />
        </div>
        <div class="right">
          <h3 class="title container">角门甲4号院 1室1厅</h3>
          <div class="one">
            <span class="xing">52㎡/西南/低楼层</span>
          </div>
          <div class="two container">
            <span class="tie tag1">集中供暖</span>
          </div>
          <div class="three"><span>4300</span>元/月</div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <!-- 收藏 -->
      <div class="collect"><van-icon name="star-o" />收藏</div>
      <!-- 在线咨询 -->
      <div class="consult">在线咨询</div>
      <!-- 电话预约 -->
      <div class="phone">电话预约</div>
    </div>
  </div>
</template>

<script>
import { specificApi } from '@/api/house'
export default {
  name: 'DetailPage',
  data () {
    return {
      list: [],
      center: { lng: 106.63439833385, lat: 26.611099016886 },
      zoom: 15,
      site: 'http://124.223.73.204:8080'
    }
  },
  mounted () {
    this.className = 'lun-img-two'
    setTimeout(() => {
      this.className = 'lun-img'
    }, 300)
  },
  async created () {
    console.log(this.$route.params.id)
    const res = await specificApi(this.$route.params.id)
    console.log(res)
    this.list = res.data.body
    this.center.lng = res.data.body.coord.longitude
    this.center.lat = res.data.body.coord.latitude
  },
  methods: {
    changeImg: function () {
      this.className = 'lun-img-two'
      setTimeout(() => {
        this.className = 'lun-img'
      }, 300)
    }
  }
}
</script>

<style lang="less" scoped>
.detail {
  background-color: #f6f5f6;
}
// 轮播图
.banner {
  position: relative;
  .nav {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    left: 0;
    top: 0;
    width: 100%;
    height: 44px;
    padding: 0 10px;
    color: #fff;
    line-height: 44px;
    text-align: center;
    z-index: 99;
  }
  .my-swipe {
    height: 212px;
    .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .lun-img {
    transition: all 4s;
    transform: scale(1.5);
  }
  .lun-img-two {
    transform: scale(1);
  }
  .el-carousel__item.is-animating {
    transition: transform 1s ease-in-out;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
  .el-carousel__button {
    display: block;
    opacity: 0.48;
    width: 10px;
    height: 2px;
    background-color: #fff;
    border: none;
    outline: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: 0.3s;
  }
}
// 信息模块
.info {
  padding: 15px;
  background-color: #fff;
  .one {
    // border-bottom: 1px solid #000;
    h4 {
      font-weight: normal;
      font-size: 16px;
      color: #333;
    }
    div {
      .tie {
        display: inline-block;
        font-size: 12px;
        border-radius: 3px;
        padding: 4px 5px;
        margin-right: 5px;
        line-height: 12px;
      }
      .tag1 {
        color: #39becd;
        background: #e1f5f8;
      }
      .tag2 {
        color: #3fc28c;
        background: #e1f5ed;
      }
      .tag3 {
        color: #5aabfd;
        background: #e6f2ff;
      }
    }
  }
  .two {
    text-align: left;
    border-top: solid 1px #cecece;
    border-bottom: solid 1px #cecece;
    margin: 15px 0;
    padding: 15px 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    .am {
      flex: 1 1;
      text-align: center;
      color: #999;
      div:first-child {
        color: #fa5741;
        font-size: 18px;
        font-weight: bolder;
      }
      div {
        height: 26px;
        line-height: 26px;
      }
      span {
        font-size: 12px;
        font-weight: normal;
      }
    }
  }
  .three {
    text-align: left;
    overflow: hidden;
    display: flex;
    align-items: center;
    .am-1 {
      box-sizing: border-box;
      flex: 1 1;
      margin-left: 8px;
      min-width: 10px;
      font-size: 13px;
      .title_1 {
        display: inline-block;
        color: #999;
        padding-right: 5px;
        line-height: 26px;
      }
    }
  }
}
// 地图
.map {
  margin-top: 10px;
  background-color: #fff;
  .map-title {
    padding: 0 12px;
    height: 44px;
    color: #666;
    font-size: 14px;
    line-height: 44px;
    span {
      color: #333;
    }
  }
  // 点
  // .BMapLabel {
  //   background-color: rgb(238, 93, 91);
  // }
  // 房屋配套详情
  .HouseDetail_about {
    padding: 0 12px;
    color: #333;
    .houseTitle {
      height: 48px;
      margin-bottom: 10px;
      padding: 15px 0;
      font-size: 15px;
      font-weight: 600;
      border-bottom: 1px solid #cecece;
    }
    .titleEmpty {
      padding: 10px 0;
      height: 36px;
      font-size: 14px;
    }
  }
}
// 房源概况
.HouseDetail_set {
  margin: 10px 0;
  padding: 0 10px;
  background-color: #fff;
  color: #333;
  .houseTitle {
    height: 48px;
    margin-bottom: 10px;
    padding: 15px 0;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid #cecece;
  }
  // 联系人
  .HouseDetail_contact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 62px;
    margin-bottom: 10px;
    .user {
      display: flex;
      align-items: center;
      height: 100%;
      img {
        margin: 10px 10px 0 0;
        width: 52px;
        height: 52px;
      }
      .userInfo {
        padding: 15px 0 0 5px;
        div {
          color: #333;
          font-size: 14px;
        }
        .userAuth {
          color: #fa5741;
          font-size: 12px;
          .van-icon {
            font-size: 16px;
          }
          .van-icon-shield-o:before {
            vertical-align: middle;
          }
        }
      }
    }
    .userMsg {
      width: 74px;
      height: 29px;
      margin-right: 15px;
      padding: 3px 15px;
      border: 1px solid #33be85;
      color: #33be85;
      font-size: 14px;
      border-radius: 3px;
    }
  }
  // 房源亮点
  .descText {
    padding: 10px 0;
    color: #333;
    font-size: 14px;
    line-height: 1.6;
  }
}
// 猜你喜欢
.recommend {
  margin-top: 10px;
  margin-bottom: 50px;
  padding: 0 15px;
  background-color: #fff;
  .houseTitle {
    height: 48px;
    margin-bottom: 10px;
    padding: 15px 0;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid #cecece;
  }
  .item {
    width: 345px;
    height: 110px;
    padding: 18px 0 0;
    border-bottom: 1px solid #e5e5e5;
    // overflow: hidden;
    .left {
      float: left;
      img {
        width: 106px;
        height: 80px;
      }
    }
    .right {
      float: left;
      padding-left: 18px;
      line-height: 22px;
      overflow: hidden;
      .title {
        margin: 0;
        font-size: 15px;
        color: #394043;
      }
      .one {
        font-size: 12px;
        color: #afb2b3;
      }
      .two {
        font-size: 12px;
        .tie {
          display: inline-block;
          font-size: 12px;
          border-radius: 3px;
          padding: 4px 5px;
          margin-right: 5px;
          line-height: 12px;
        }
        .tag1 {
          color: #39becd;
          background-color: #e1f5f8;
        }
      }
      .three {
        color: #fa5741;
        span {
          font-size: 16px;
          font-weight: bolder;
        }
      }
    }
  }
}
// 底部
.footer {
  position: fixed;
  bottom: 0;
  display: flex;
  // justify-content: space-evenly;
  // align-items: center;
  height: 50px;
  background-color: #fff;
  color: #999;
  border-top: 1px solid #cecece;
  text-align: center;
  line-height: 50px;
  .collect {
    width: 120px;
    height: 100%;
    border-right: 1px solid #cecece;
  }
  .consult {
    width: 120px;
    height: 100%;
    margin-left: 8px;
    // border-right: 1px solid #cecece;
  }
  .phone {
    width: 120px;
    height: 100%;
    margin-left: 8px;
    background-color: #21b97a;
    color: #fff;
  }
}
</style>
